<template>
  <div class="right-tool-btn">
    <el-tooltip class="item" effect="light" :content="searchVisible ? '隐藏搜索' : '显示搜索'" placement="top">
      <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
    </el-tooltip>
    <el-tooltip class="item" effect="light" content="刷新表格" placement="top">
      <el-button :disabled="searchLoad" size="mini" circle icon="el-icon-refresh" @click="refreshTable()" />
    </el-tooltip>
  </div>
</template>
<script>
  export default {
    name: "right-toolbar",
    props: {
      /**
       * 检索列表是否显示[true-显示 false-失败]
       */
      searchVisible: {
        type: Boolean,
        default: true
      },
      /**
       * 检索列表是否在加载[true-加载 false-不加载]
       */
      searchLoad: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      /**
       * 检索列表显示/隐藏切换事件
       */
      toggleSearch() {
        // 向上传递事件
        this.$emit("toggle-search");
      },
      /**
       * 刷新表格事件
       */
      refreshTable() {
        // 向上传递事件
        this.$emit("refresh-table");
      },
    },
  }
</script>

<style scoped>
  .right-tool-btn {
    float: right;
    margin-right: 7px;
  }
</style>
